/* pages/user/user-deck-list/user-deck-list.page.wxss */
page {
  background-color: var(--color-light);
}

.search {
  display: flex;
  background-color: var(--bg-main);
  box-shadow: 1px 1px 10px #323232;

  ua-deck-filter {
    width: 100%;
  }
}

.deck {
  padding: 0.5rem 0.5rem 0 0.5rem;
  background-color: var(--color-light);

  .deck-content {
    background-color: white;
    border-radius: 1rem;

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      border-radius: 1rem;
      padding: 0.5rem 0;
      position: relative;

      .cover {
        display: inline-flex;
        width: 3.6rem;
        height: 5rem;
        justify-content: center;
        align-items: center;
        margin-left: 0.5rem;

        .deck-cover {
          display: block;
          overflow: hidden;
          position: relative;
          width: 3.6rem;
          height: 100%;
          border: 1px solid #999;
          border-radius: 4px;

        }

        .content {
          width: 100%;
          height: 100%;
        }

        .img-0-1 {
          display: inline-block;
          position: relative;
          width: 100%;
          height: 100%;
        }

        .img-0-2 {
          display: inline-block;
          position: relative;
          width: 50%;
          height: 100%;
        }

        .img-1-2 {
          display: inline-block;
          position: relative;
          width: 50%;
          height: 100%;
        }

        .img-0-3 {
          display: inline-block;
          position: relative;
          width: 100%;
          height: 50%;
        }

        .img-1-3 {
          display: inline-block;
          position: relative;
          width: 50%;
          height: 50%;
        }

        .img-2-3 {
          display: inline-block;
          position: relative;
          width: 50%;
          height: 50%;
        }

        .img-0-4 {
          display: inline-block;
          width: 50%;
          height: 50%;
        }

        .img-1-4 {
          display: inline-block;
          width: 50%;
          height: 50%;
        }

        .img-2-4 {
          display: inline-block;
          width: 50%;
          height: 50%;
        }

        .img-3-4 {
          display: inline-block;
          width: 50%;
          height: 50%;
        }
      }

      .logo {
        position: absolute;
        bottom: 0;
        right: 0;
        height: auto;
      }

      .energy {
        position: absolute;
        top: 0;
        right: 0;
        width: 2.5rem;
        height: 2rem;
        padding: 0.25rem 0.5rem;
        box-sizing: border-box;
        border-radius: 0 1rem 0 1rem;

        .img {
          width: 1.5rem;
          height: 1.5rem;
        }
      }

      .energy.Purple {
        background-color: #F6D8F2 !important;

        .p {
          background: #910782 !important;
        }
      }

      .energy.Red {
        background-color: #FFDAE0 !important;

        .p {
          background: #E50315 !important;
        }
      }

      .energy.Green {
        background-color: #DAF9EB !important;

        .p {
          background: #02A63C !important;
        }
      }

      .energy.Yellow {
        background-color: #FFFCDF !important;

        .p {
          background: #FCCE00 !important;
        }
      }

      .energy.Blue {
        background-color: #D8F3FF !important;

        .p {
          background: #0170BD !important;
        }
      }

      .info {
        box-sizing: border-box;
        display: inline-flex;
        width: calc(100% - 4.1rem);
        justify-content: space-evenly;
        flex-direction: column;
        padding: 0 0.5rem;
        height: 5rem;

        .h1 {
          color: var(--color-h1);
        }

        .h2 {
          color: var(--color-h3);
          font-size: 0.8em;
        }

        .rank {
          display: inline-flex;
          color: white;
          font-size: 10px;
          background: linear-gradient(var(--bg-main), var(--color-medium));
          width: 3.5rem;
          height: 1rem;
          justify-content: center;
          align-items: center;
          border-radius: 0.25rem;
          margin: 0.25rem 0;
        }
      }

      .image {
        width: 100%;
      }

    }

    .header.has-preview {
      border-radius: 0.5rem 0.5rem 0 0;
    }
  }
}


.popup-card-detail {
  --td-popup-bg-color: rgba(255, 255, 255, 0);
}

.preview {
  background: var(--bg-main);
  padding: 0.5rem;
  border-radius: 1rem;

  .action-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.5rem 2rem;
  }
}